<template>
  <div class="account">
    <div class="header-view">
      <el-button type="primary" size="mini" @click="adduserLevel">新 增</el-button>
    </div>
    <el-table v-loading="loadingUser" :data="userLevelList">
      <el-table-column label="用户等级" align="center" prop="level" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="等级图标" align="center" prop="icon" min-width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <oss-image-preview :model="'img'" width="50px" :src="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column label="等级名" align="center" prop="name" min-width="100" :show-overflow-tooltip="true" />
      <el-table-column label="是否允许开店" align="left" prop="openShopFlag" min-width="100"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.openShopFlag" active-color="#13ce66" inactive-color="#ff4949"
                     :active-value="1" :inactive-value="2" @change="userLevelStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="是否允许上传短视频" align="left" prop="upShortVideoFlag" min-width="100"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.upShortVideoFlag" active-color="#13ce66" inactive-color="#ff4949"
                     :active-value="1" :inactive-value="2" @change="userLevelStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="是否允许线上理财" align="left" prop="onlineFinancialFlag" min-width="100"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.onlineFinancialFlag" active-color="#13ce66"
                     inactive-color="#ff4949" :active-value="1" :inactive-value="2"
                     @change="userLevelStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="是否允许线下理财" align="left" prop="offlineFinancialFlag" min-width="100"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.offlineFinancialFlag" active-color="#13ce66"
                     inactive-color="#ff4949" :active-value="1" :inactive-value="2"
                     @change="userLevelStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="申请主播" align="left" prop="" min-width="100"
                       :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.applyAnchor" active-color="#13ce66"
                     inactive-color="#ff4949" :active-value="1" :inactive-value="2"
                     @change="userLevelStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="保持金额" align="center" prop="keepAmount" min-width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.keepAmount)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="最小提现金额" align="center" prop="minimumWithdrawal" min-width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.minimumWithdrawal)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="最大提现金额" align="center" prop="maximumWithdrawal" min-width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.maximumWithdrawal)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="日提现次数" align="center" prop="dailyWithdrawal" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="周提现次数" align="center" prop="weeklyWithdrawal" min-width="120" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                       width="200">
        <template slot-scope="scope">
          <div>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="updateUserLevel(scope.row)"
                       v-hasPermi="['car:level:edit']">修改</el-button>
            <el-button v-if="scope.row.id == maxUserLevel" size="mini" type="text" icon="el-icon-delete"
                       @click="deleteUserLevel(scope.row)" v-hasPermi="['car:level:remove']">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加或修改用户等级对话框 -->
    <el-dialog :title="titleUser" :visible.sync="openUser" width="750px" append-to-body>
      <el-form ref="userForm" :model="userForm" :rules="userRules" label-width="120px" label-position="left">
        <el-row>
          <el-col :span="12">
            <el-form-item label="等级名" prop="name">
              <el-input class="modal-input-mini" v-model="userForm.name" placeholder="请输入等级名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="等级" prop="level">
              <el-input class="modal-input-mini" v-model="userForm.level" placeholder="请输入等级" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邀请人数" prop="upgradeConditionNum">
              <el-input type="number" class="modal-input-mini" v-model="userForm.upgradeConditionNum"
                        placeholder="请输入升级条件" />
            </el-form-item>
          </el-col>
          <el-col :span="12"><el-form-item label="要求金额" prop="keepAmount">
            <el-input type="number" class="modal-input-mini" v-model="userForm.keepAmount" placeholder="请输入保持金额" />
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最小提现金额" prop="minimumWithdrawal">
              <el-input type="number" class="modal-input-mini" v-model="userForm.minimumWithdrawal"
                        placeholder="请输入最小提现金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12"><el-form-item label="最大提现金额" prop="maximumWithdrawal">
            <el-input type="number" class="modal-input-mini" v-model="userForm.maximumWithdrawal" placeholder="请输入最大提现金额" />
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="日提现次数" prop="dailyWithdrawal">
              <el-input type="number" class="modal-input-mini" v-model="userForm.dailyWithdrawal" placeholder="请输入日提现次数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="周提现次数" prop="weeklyWithdrawal">
              <el-input type="number" class="modal-input-mini" v-model="userForm.weeklyWithdrawal" placeholder="请输入周提现次数" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="最小提现金额" prop="minimumWithdrawal">
              <el-input type="number" class="modal-input-mini" v-model="userForm.minimumWithdrawal" placeholder="请输入最小提现金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大现金额" prop="maximumWithdrawal">
              <el-input type="number" class="modal-input-mini" v-model="userForm.maximumWithdrawal" placeholder="请输入最大现金额" />
            </el-form-item>
          </el-col>
        </el-row> -->


        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="升级奖励" prop="reward">
              <el-input type="number" class="modal-input-mini" v-model="userForm.reward" placeholder="请输入升级奖励" />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="等级图标" prop="icon">
              <!-- <el-input class="modal-input-mini" v-model="userForm.icon" placeholder="请输入等级图标" /> -->
              <ImageUpload :limit="1" v-model="userForm.icon"></ImageUpload>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUserLevelForm">确 定</el-button>
        <el-button @click="cancelUserLevel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { userLevelList, userLevelUpdate, userLevelAdd, deleteUserLevel } from "@/api/setting/gradeRebate";
import Template from "@/views/setting/template/index.vue";
export default {
  components: {Template},
  data() {
    return {
      // 遮罩层
      loading: true,
      userShareForm: {},
      userShareOpen: false,
      userShareEditTitle: "",
      //商铺等级列表
      storeLevelList: [],
      openStore: false,
      titleStore: '',
      //用户
      loadingUser: false,
      userLevelList: [],
      titleUser: '',
      openUser: false,
      userForm: {},
      userRules: {
        name: { required: true, message: '请输入用户等级名称', trigger: 'blur' },
        level: { required: true, message: '请输入用户等级', trigger: 'blur' },
        upgradeConditionNum: { required: true, message: '请输入用户升级条件', trigger: 'blur' },
        completeOnlineFinancialNum: { required: true, message: '请输入每周完成线下理财数量', trigger: 'blur' },
        keepAmount: { required: true, message: '请输入保证金', trigger: 'blur' },
        minimumWithdrawal: { required: true, message: '请输入最小提现金额', trigger: 'blur' },
        maximumWithdrawal: { required: true, message: '请输入最大提现金额', trigger: 'blur' },
        // parentLevel: { required: true, message: '请选择父级Id', trigger: 'blur' },
        icon: { required: true, message: '请上传用户等级图标', trigger: 'blur' },
        dailyWithdrawal : { required: true, message: '请输入日提现次数', trigger: 'blur' },
        weeklyWithdrawal : { required: true, message: '请输入周提现次数', trigger: 'blur' },
        reward : { required: true, message: '请输入升级奖励', trigger: 'blur' },
        minimumWithdrawal : { required: true, message: '请输入最小提现金额', trigger: 'blur' },
        maximumWithdrawal : { required: true, message: '请输入最大提现金额', trigger: 'blur' },
      },
      maxUserLevel: 0
    };
  },
  created() {
    this.getUserLevelList();
  },
  methods: {
    //获取用户等级列表
    getUserLevelList() {
      this.loadingUser = true;
      userLevelList(this.queryParams).then(response => {
        this.userLevelList = response.data;
        this.maxUserLevel = Math.max(...this.userLevelList.map(i => i.id))
        this.loadingUser = false;
      });
    },
    // 取消按钮
    cancelUserLevel() {
      this.openUser = false;
      this.$refs['userForm'].clearValidate();
    },
    // 表单重置
    resetUserLevel() {
      this.userForm = {
        id: null,
        name: null,
        icon: null,
        upgradeConditionNum: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        upShortVideoFlag: null,
        openShopFlag: null,
        onlineFinancialFlag: null,
        offlineFinancialFlag: null,
        completeOnlineFinancialNum: null,
        keepAmount: null,
        level: null,
        nextLevel: null,
        minimumWithdrawal:null,
        maximumWithdrawal:null,
      };
      this.resetForm("resetUserLevel");
    },/** 新增按钮操作 */
    adduserLevel() {
      this.resetUserLevel();
      this.openUser = true;
      this.titleUser = "添加用户等级";
    },
    /** 修改按钮操作 */
    updateUserLevel(row) {
      this.resetUserLevel();
      this.userForm = {...row};
      this.openUser = true;
      this.titleUser = "修改用户等级";
    },
    /** 删除按钮操作 */
    deleteUserLevel(row) {
      this.$modal
        .confirm("确认删除" + row.name + "的数据项？")
        .then(function () {
          return deleteUserLevel(row.id);
        })
        .then(() => {
          this.getUserLevelList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    /** 提交按钮 */
    submitUserLevelForm() {
      this.$refs["userForm"].validate(valid => {
        if (valid) {
          if (this.userForm.id != null) {
            userLevelUpdate(this.userForm).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openUser = false;
              this.getUserLevelList();
            });
          } else {
            userLevelAdd(this.userForm).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.openUser = false;
              this.getUserLevelList();
            });
          }
        }
      });
    },
    // 状态修改
    userLevelStatusChange(row) {
      userLevelUpdate(row).then(res => {
        if (res.success) {
          this.getUserLevelList();
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    formatterKeepAmount:function(row){
      return this.$yun.priceFormatter(row.keepAmount);
    },
  },
};
</script>

<style lang="scss" scoped>
.account {
  padding: 10px;
}

.header-view {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 44px;

}

.group-title {
  font-size: 18px;
  font-weight: 700;
  color: #333333;
}

.el-table {
  width: auto !important;
}

.table-title {
  height: 44px;
  line-height: 44px;
}
</style>
